{% extends "base.html" %}
{% block main_content %}
    <div class="wrap-content">
        <div class="ios-card">
            <div class="header-content">
                <h2 class="ios-title">{{ title }}</h2>
                <div class="sort-container">
                    <form method="post" action="{% url 'index' %}" class="sort-form">
                        {% csrf_token %}
                        <select class="sort-select" name="order" onchange="this.form.submit()">
                            <option value="price" id="price">价格排序</option>
                            <option value="collect" id="collect">收藏排序</option>
                            <option value="rate" id="rate">评分排序</option>
                        </select>
                    </form>
                </div>
            </div>
            
            <div class="products-grid">
                {% for product in products %}
                    <div class="product-card">
                        <a href="{% url 'product' product.id %}">
                            <div class="product-image">
                                <img src="{{ MEDIA_URL }}{{ product.image_link }}" alt="{{ product.name }}"/>
                            </div>
                            <div class="product-info">
                                <h3 class="product-title">{{ product.name | slice:":24" }}</h3>
                                <div class="product-meta">
                                    <span class="product-price">￥{{ product.price }}</span>
                                    <span class="ios-tag">
                                        <i class="fas fa-star"></i>
                                        {{ product.d_rate_nums }}
                                    </span>
                                </div>
                            </div>
                        </a>
                    </div>
                {% endfor %}
            </div>

            {% if products.has_other_pages %}
                <div class="pagination-wrapper">
                    <ul class="pagination">
                        {% if products.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ products.previous_page_number }}">
                                    <i class="fas fa-chevron-left"></i>
                                </a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">
                                    <i class="fas fa-chevron-left"></i>
                                </span>
                            </li>
                        {% endif %}

                        {% for i in products.paginator.page_range %}
                            {% if i <= products.number|add:5 and i >= products.number|add:-5 %}
                                <li class="page-item {% if products.number == i %}active{% endif %}">
                                    <a class="page-link" href="?page={{ i }}">{{ i }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}

                        <li class="page-item">
                            <span class="page-link">
                                {{ products.number }}/{{ products.paginator.num_pages }}
                            </span>
                        </li>

                        {% if products.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ products.next_page_number }}">
                                    <i class="fas fa-chevron-right"></i>
                                </a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">
                                    <i class="fas fa-chevron-right"></i>
                                </span>
                            </li>
                        {% endif %}
                    </ul>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block bottom-js %}
<script>
    $(document).ready(function() {
        // 清除所有选项的选中状态
        $('option').prop('selected', false);
        
        // 根据当前标题设置选中项
        var title = "{{ title }}";
        if (title === "评分排序") {
            $('#rate').prop('selected', true);
        } else if (title === '收藏排序') {
            $('#collect').prop('selected', true);
        } else if (title === '价格排序') {
            $('#price').prop('selected', true);
        }
    });
</script>
{% endblock %}
